<template>
  <div>
    <Breadcrumb :title="subTitle " :opt-data="commandOptData"></Breadcrumb>
    <PageLayout>
      <div class="table-container height-100">
        <EZTable
          v-loading="tableLoading"
          :table-id="tableId"
          :table-hdl="tableHdl"
          :rows="commandData"
          :custom-empty="true"
          @pageChanged="getDeviceCommandData"
          @sizeChanged="getDeviceCommandData"
          @filterChange="getDeviceCommandData">
          <EmptyContent slot="empty" :opt-data="commandOptData"></EmptyContent>
        </EZTable>
      </div>
      <el-dialog
        title=""
        :visible.sync="historyDialog"
        :close-on-click-modal="false"
        width="1600px"
        center>
        <OperationLog :dialogTitle=historyTitle :relationId=historyRelationId></OperationLog>
      </el-dialog>
    </PageLayout>
  </div>
</template>

<script>
  import {commonConfig} from "@/config/common";
  import {commonString, msgCode} from "@/config/string";
  import {routerMeta} from "@/router/routerMeta";
  import {tableIdConfig, tableOptBtnConfig} from '@/config/table';
  import {confirmHandle, deepCopyWithJson, messageHandle} from "@/utils";
  import {assembleTableOptBtn, getTableConfig, TableStateHdl} from "@/modules/routeParamStateHdl";
  import commandTableCfg from "../../../config/table/command";
  import EZTable from '../../../components/table/EZTable';
  import OperationLog from "../../operationLog/OperationLog";

  export default {
    name: "DeviceCommand",
    components: {
      EZTable, OperationLog
    },
    data() {
      return {
        protocolId: '',
        protocolInfo: {},
        tableLoading: true,
        tableId: tableIdConfig.command,
        tableHdl: null,
        commandData: [],
        historyRelationId: '',
        historyTitle: '',
        historyDialog: false,
        subTitle: ''
      }
    },
    computed: {
      commandOptData() {
        return [
          {
            type: 'btn',
            label: '新增命令',
            icon: 'icon-tianjia',
            callback: () => {
              this.clickCreateBtn();
            }
          }
        ];
      }
    },
    activated() {
      this.protocolId = this.$route.params.pid;
      this.initTableConfig();
      this.getProtocolInfo();
      this.getDeviceCommandData();
    },
    methods: {
      initTableConfig() {
        if (this.tableHdl) return;
        const {columns = [], filters = []} = getTableConfig(this.tableId, commandTableCfg);
        assembleTableOptBtn(columns, ({type = '', data = {}}) => {
          if (!type) return;
          const command = deepCopyWithJson(data);
          switch (type) {
            case tableOptBtnConfig.edit.type:
              this.$router.push({
                name: routerMeta.commandEdit.name,
                params: {
                  pid: this.protocolId,
                  cid: command._id
                }
              });
              break;
            case tableOptBtnConfig.copy.type:
              this.$router.push({
                name: routerMeta.commandClone.name,
                params: {
                  pid: this.protocolId,
                  cid: command._id
                }
              });
              break;
            case tableOptBtnConfig.delete.type:
              this.deleteDeviceCommand(command);
              break;
            default:
              break;
          }
        });
        this.tableHdl = new TableStateHdl(this.$route.name, this.tableId, columns, filters);
      },
      getProtocolInfo() {
        const selector = {_id: this.protocolId};
        const tableParam = this.tableHdl.assembleTableParam();
        API.protocol.protocolList({selector, ...tableParam}).then(result => {
          const {data = {}} = result;
          this.protocolInfo = data;
          this.subTitle = data[0].protocolName
        }).catch(err => {
        });
      },
      getDeviceCommandData() {
        this.tableLoading = true;
        const selector = {protocol: this.protocolId};
        const tableParam = this.tableHdl.assembleTableParam();
        API.command.commandList({selector, ...tableParam}).then(result => {
          this.tableLoading = false;
          const {data = [], total = 0} = result;
          this.commandData = data;
          this.tableHdl.total = total;
        }).catch(err => {
          console.log('err', err)
          this.tableLoading = false;
        });
      },
      clickCreateBtn() {
        this.$router.push({name: routerMeta.commandAdd.name, params: {pid: this.protocolId}});
      },
      deleteDeviceCommand(command = {}) {
        confirmHandle({label: `确定要删除设备命令：${command.commandName} 吗?`}).then(() => {
          API.command.commandDelete({_id: command._id}).then(result => {
            messageHandle({code: msgCode.DELETE_SUCCESS, title: '设备命令'});
            this.tableHdl.judgeTableMatched();
            this.getDeviceCommandData();
          });
        }).catch(() => {
        });
      },
    },
  }
</script>

<style scoped>

</style>
